<template>
  <el-dialog title="新增候选人-种子简历" :visible="visible" @close="handleClose" width="960px" append-to-body>
    <div class="p-20">
      <el-form ref="form" v-model="form" label-width="82px" label-position="left" size="small">
        <el-row :gutter="50">
          <el-col :span="12" v-if="config.name">
            <el-form-item label="姓名" required>
              <el-input v-model="form.name" placeholder="输入候选人姓名" :class="{'w-320':edit}"></el-input>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('name')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="config.company">
            <el-form-item label="公司">
              <el-input v-model="form.company" placeholder="输入公司名称" :class="{'w-320':edit}"></el-input>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('company')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="config.phone">
            <el-form-item label="手机号码" required class="blue">
              <el-input v-model="form.phone" placeholder="输入手机号码" :class="{'w-320':edit}"></el-input>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('phone')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="config.wx">
            <el-form-item label="微信" required class="blue">
              <el-input v-model="form.wx" placeholder="输入微信号" :class="{'w-320':edit}"></el-input>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('wx')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="config.email">
            <el-form-item label="邮箱" required class="blue">
              <el-input v-model="form.email" placeholder="输入常用邮箱" :class="{'w-320':edit}"></el-input>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('email')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="config.source">
            <el-form-item label="简历来源">
              <el-select v-model="form.source" style="width: 100%" placeholder="输入候选人来源" :class="{'w-320':edit}">
                <el-option value="1" label="伯乐"></el-option>
                <el-option value="1" label="自己录入"></el-option>
              </el-select>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('source')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="config.power">
            <el-form-item label="简历权限">
              <el-select v-model="form.power" style="width: 100%" :class="{'w-320':edit}">
                <el-option value="1" label="仅自己可见"></el-option>
                <el-option value="1" label="公开"></el-option>
              </el-select>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('power')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="config.project"> 
            <el-form-item label="项目">
              <el-input v-model="form.project" required placeholder="输入项目名称，用逗号隔开" :class="{'w-320':edit}"></el-input>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('project')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="config.ziduan1"> 
            <el-form-item label="字段一">
              <el-input v-model="form.ziduan1" required :class="{'w-320':edit}"></el-input>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('ziduan1')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="config.ziduan2"> 
            <el-form-item label="字段二">
              <el-input v-model="form.ziduan2" required :class="{'w-320':edit}"></el-input>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('ziduan2')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="config.ziduan3"> 
            <el-form-item label="字段三">
              <el-input v-model="form.ziduan3" required :class="{'w-320':edit}"></el-input>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('ziduan3')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="config.ziduan4"> 
            <el-form-item label="字段四">
              <el-input v-model="form.ziduan4" required :class="{'w-320':edit}"></el-input>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('ziduan4')"></i>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="config.remark">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" required :class="{'w-320':edit}"></el-input>
              <i class="close-icon el-icon-close" v-if="edit" @click="doEdit('remark')"></i>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <ui-button class="add" @click="edit=true">
        <span><i class="el-icon-plus"></i>添加字段</span>
      </ui-button>
      <div v-if="edit" class="edit-form">
        <div class="mt-10">
          <div class="field-edit-item" @click="doEdit(item.name)" :class="{active:config[item.name]==true}" v-for="(item,index) in editForm" :key="index">
            <span>{{item.title}}</span>
            <div>
              <div class="corner"></div>
              <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 40 40" class="cuk-icon cuk-icon-check" style="vertical-align: middle;"><g><path d="m37.3 12.6q0 0.9-0.6 1.6l-19.2 19.1q-0.6 0.7-1.5 0.7t-1.6-0.7l-11.1-11.1q-0.6-0.6-0.6-1.5t0.6-1.5l3.1-3q0.6-0.7 1.5-0.7t1.5 0.7l6.6 6.5 14.6-14.6q0.6-0.6 1.5-0.6t1.5 0.6l3.1 3q0.6 0.6 0.6 1.5z"></path></g></svg>
            </div>
          </div>
          <div>
            <el-button type="blue" size="small" @click="edit=false">保存</el-button>
          </div>
        </div>
      </div>
      <div class="m-tips">
        <p>提示：除带 <span style="color:#f56c6c">*</span> 项目为必填项目；带 <span style="color:#0073dd">*</span> 项目必须选择一项填写。</p>
      </div>
      <div class="form-bottom t-right">
        <ui-button size="medium">上一步</ui-button>
        <ui-button size="medium" @click="handleClose">取消</ui-button>
        <ui-button size="medium" type="blue" @click="submitThenAgain">提交并录入下一份</ui-button>
        <ui-button size="medium" type="blue" @click="submit">提交</ui-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {Dialog, Form, FormItem, Row, Col, Select, Option, Input, Button} from 'element-ui'
  export default {
    props: ['visible'],
    components: {
      [Dialog.name]: Dialog,
      [Form.name]: Form,
      [FormItem.name]: FormItem,
      [Row.name]: Row,
      [Col.name]: Col,
      [Select.name]: Select,
      [Option.name]: Option,
      [Input.name]: Input,
      [Button.name]: Button
    },
    data () {
      return {
        form: {
        },
        edit: false,
        editForm: [
          {
            title: '姓名',
            name: 'name'
          },
          {
            title: '公司',
            name: 'company'
          },
          {
            title: '手机号码',
            name: 'phone'
          },
          {
            title: '微信',
            name: 'wx'
          },
          {
            title: '邮箱',
            name: 'email'
          },
          {
            title: '简历来源',
            name: 'source'
          },
          {
            title: '简历权限',
            name: 'power'
          },
          {
            title: '项目',
            name: 'project'
          },
          {
            title: '备注',
            name: 'remark'
          },
          {
            title: '字段一',
            name: 'ziduan1'
          },
          {
            title: '字段二',
            name: 'ziduan2'
          },
          {
            title: '字段三',
            name: 'ziduan3'
          },
          {
            title: '字段四',
            name: 'ziduan4'
          }
        ],
        config: {
          name: true,
          company: true,
          phone: true,
          wx: true,
          email: true,
          source: true,
          power: true,
          project: true,
          remark: true,
          ziduan1: false,
          ziduan2: false,
          ziduan3: false,
          ziduan4: false,
        }
      }
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false)
      },
      // 验证表单
      validateForm() {
        // 表单验证内容
        return true
      },
      //提交
      submit() {
        if(this.validateForm){
          this.$message.success('保存成功');
          return true
          
        }
      },
      submitThenAgain() {
        if(this.submit){
          this.$refs.form.resetFields();
        }
      },
      doEdit(name) {
        console.log(name)
        console.log(this.config[name])
        this.config[name] = !this.config[name]
      }
    }
  }
</script>

<style lang="scss">
  .el-form-item.blue{
    .el-form-item__label:before{
      color: #0073dd !important;
    }
  }
  .m-tips{
    margin-top: 30px;
    padding: 10px;
    background: #f0f0f0;
    border: 1px dashed #b9ddff
  }
  .ui-button.add{
    border: 1px dashed #e0e0e0;
    color: #929292;
    min-width: 100px;
    padding: 8px 15px;
  }
  .ui-button.add:hover{
    border-color: #929292;
  }
  .w-320{
    width: 320px !important;
  }
  .close-icon{
    font-size: 20px;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 5px;
  }
  .field-edit-item{
    position: relative;
    width: 120px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 0 10px;
    border: 1px solid #f5f7fa;
    border-radius: 2px;
    cursor: pointer;
    order: 1;
    span{
      margin-left: 5px;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex-shrink: 1;
    }
    .corner{
      position: absolute;
      border-color: #dadfe6 #dadfe6 transparent transparent;
      border-style: solid;
      border-width: 17px;
      border-top-right-radius: 2px;
      right: 0;
      top: 0;
      border-width: 14px;
    }
    .cuk-icon{
      position: absolute;
      right: 2px;
      top: 2px;
      color: #202d40;
    }
  }
  .field-edit-item.active{
    .corner{
      border-right-color: #6bd420;
      border-top-color: #6bd420;
    }
    .cuk-icon{
      color: #fff;
    }
  }
  .field-edit-item:hover{
    border-color: #666;
  }
</style>
